<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>教师新增</span>
            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="教师工号" :label-width="formLabelWidth" prop="userNumber">
                    <el-input v-model="form.userNumber" autocomplete="off" placeholder="学号由入学年份+院系+班级+序号"></el-input>
                </el-form-item>
                <el-form-item label="教师名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="教师姓名"></el-input>
                </el-form-item>
                <el-form-item label="教师年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off" placeholder="教师年龄 18-24"></el-input>
                </el-form-item>
                <el-form-item label="教师电话" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off" placeholder="教师电话"></el-input>
                </el-form-item>
                <el-form-item label="教师性别" :label-width="formLabelWidth" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择性别" style="text-align: left;">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        //  正则表达式
        var phoneRegex = (rule, value, callback) => {
            let phoneRegex = /^1[356789][0-9]{9}$/;
            if (phoneRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的电话号码'));

            }
        };
        var userNumberRegex = (rule, value, callback) => {
            let userNumberRegex = /^20[0-9]{2}[0-9]{5}[0-9][0-9][1-9]$/;
            if (userNumberRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的学号'));

            }
        };
        var ageRegex = (rule, value, callback) => {
            // 18 - 24 
            let ageRegex = /^[2-6][0-9]$/;
            if (ageRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的年龄'));

            }
        };
        return {
            form: {
                userNumber: "",
                name: '',
                age: "",
                gender: "男",
                phone: "",
            },
            classList: [],
            formLabelWidth: '80px',
            rules: {
                userNumber: [
                    { required: true, message: '请输入工号', trigger: 'blur' },
                    { validator: userNumberRegex, trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { validator: ageRegex, trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度是 11 字符', trigger: 'blur' },
                    { validator: phoneRegex, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                classId: [
                    { required: true, message: '请选择班级', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        async handleOk() {
            let res = await api.addTeacher({ ...this.form })
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.$router.push('/teachers/list')
            } else {
                this.$message.error(res.message);
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
    width: 340px;
}
</style>